/**
 * ts官网 ： https://www.tslang.cn/docs/handbook/generics.html
 * https://github.com/Microsoft/TypeScript-React-Starter#typescript-react-starter学习网址
 */
import React from 'react';
import { Button } from 'antd';

 export interface Props {
    name?: string;
    level?: number;
}
export interface State {
    currentLevel: number;
}

 class Hello extends React.Component<Props, State> {

    constructor(props: Props) {
        super(props);
        this.state = { currentLevel: props.level || 1 };
    }

    onIncrement = () => this.updateLevel(this.state.currentLevel + 1);
    onDecrement = () => this.updateLevel(this.state.currentLevel - 1);

    updateLevel = (currentLevel: number) => {
        this.setState({currentLevel})
    }
    getExclamationMarks = (numChars: number) => {
        return Array(numChars+1).join('!');
     }
     render() {
         const {name, level = 1} = this.props;
         if(level<=0) {
            throw new Error('You could be a little more enthusiastic. :D');
         }

         
         return (
            <div className="hello">
            <div className="greeting">
              Hello {name + this.getExclamationMarks(this.state.currentLevel)}
            </div>
            <Button onClick={this.onDecrement}>-</Button>
            <Button onClick={this.onIncrement}>+</Button>
          </div>
         )
     }
 }
    

 export default Hello